@import "_function.less";
@import "normalize.css";

.download
.header {
  .h(88);
  box-shadow: #a9a9a9 0 0 5px 0;
  div {
    float: left;
    .h(88);
  }
  .return {
    width: 20%;
    text-align: center;
    i {
      .fs(45);
      .lh(88);
      color: #666666;
    }
  }
  .center {
    width: 80%;
    .title {
      width: 80%;
      div {
        width: 50%;
        float: left;
        h3 {
          .fs(32);
          .h(88);
          .lh(88);
          color: #7f7f7f;
          text-align: center;
        }
        .on {
          color: #5ebbff;
          font-weight: bold;
          position: relative;
        }
        .on:after {
          content: '';
          position: absolute;
          .w(60);
          .h(4);
          .br(6);
          background-color: #5ebbff;
          bottom: 0;
          left: 50%;
          .ml(-30);
        }
      }
    }
  }
}

.download
.content {
  .mt(2);
  .not404 {
    display: none;
    //display: block;
    .w(187);
    .h(198);
    margin-top: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  .control {
    .h(80);
    .lh(80);
    .fs(28);
    color: #666666;
    background-color: #f4f4f4;
    div {
      span {
        display: block;
        .h(80);
        .lh(80);
        .ml(58);
      }
    }
    .playall {
      float: left;
      .ml(64);
      .bs(46, 46);
      background-image: url("../image/playing.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
    .delall {
      float: right;
      .mr(64);
      .bs(46, 46);
      background-image: url("../image/clear.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
    .explain {
      float: left;
      color: #666666;
    }
    .manage {
      float: right;
      .mr(64);
      .bs(38, 44);
      background-image: url("../image/manage.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
    .check-all {
      float: left;
      .ml(64);
      .bs(45, 45);
      background-image: url("../image/check.png");
      background-repeat: no-repeat;
      background-position: left center;
      span {
        .ml(64);
      }
    }
    .cancel {
      float: right;
      span {
        .ml(0);
        .mr(64);
      }
    }
  }
  .item {
    .h(118);
    .p(0, 64, 0, 64);
    border-bottom: #e9e9e9 1px solid;
    div {
      float: left;
    }
    .play {
      .w(46);
      .h(46);
      .mt(36);
      .mb(36);
      .bs(46, 46);
      background-image: url("../image/playing.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
    .name {
      .h(118);
      .ml(12);
      .title {
        .fs(32);
        .mt(25);
        color: #888888;
        span {
          color: #5ebbff;
          .mr(20);
        }
      }
      .status {
        .fs(24);
        .mt(12);
        .mb(25);
        color: #e1e1e1;
      }
    }
    .del {
      float: right;
      .w(30);
      .h(30);
      .mt(44);
      .mb(44);
      .bs(30, 30);
      background-image: url("../image/del.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
  }
  .items {
    position: relative;
    .p(30, 64, 30, 64);
    border-bottom: #e9e9e9 1px solid;
    img {
      float: left;
      .w(180);
      .h(240);
    }
    p {
      float: left;
      .w(360);
      .ml(26);
      .mt(24);
      color: #6b6b6b;
      .flow {
        .ml(40);
      }
    }
    .book-name {
      .fs(32);
    }
    .check {
      position: absolute;
      top: 50%;
      .mt(-22.5);
      .mr(64);
      right: 0;
      .w(45);
      .h(45);
      .bs(45, 45);
      background-image: url("../image/check.png");
      background-repeat: no-repeat;
      background-position: left center;
    }
  }
}